<template>
  <el-header height="60px" class="header">
    <div class="logo">管理后台</div>
    <div class="nav-right">
      <!-- 登录按钮：未登录时显示 -->
      <el-button 
        v-if="!isLoggedIn" 
        @click="openLoginDialog"
        type="primary"
      >
        登录
      </el-button>
      <!-- 登录后显示的用户信息 -->
      <div v-else class="user-info">
        <span>{{ userInfo.username || '管理员' }}</span>
        <el-button type="text" @click="handleLogout">退出登录</el-button>
      </div>
    </div>

    <!-- 登录弹窗 -->
    <el-dialog 
      v-model="loginDialogVisible" 
      title="管理员登录"
      width="350px"
      :close-on-click-modal="false"  
    >
      <el-form 
        :model="formData" 
        :rules="loginRules" 
        ref="formRef"
        label-width="80px"
        class="sign-form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input 
            v-model="formData.username" 
            placeholder="请输入用户名"
            clearable 
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="formData.password" 
            type="password" 
            placeholder="请输入密码"
            clearable
            show-password 
          />
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitLoginForm"
            style="width: 100%"  
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElLoading } from 'element-plus';

// 创建axios实例（适配后端接口）
const api = axios.create({
  baseURL: 'http://127.0.0.1:8080', // 与后端地址一致
  timeout: 8000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 响应式数据
const loginDialogVisible = ref(false);
const isLoggedIn = ref(false);
const userInfo = ref({});
const formData = ref({
  username: '',
  password: ''
});
const formRef = ref(null);

// 登录表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: ['blur', 'change'] }
  ]
};

// 打开登录弹窗
const openLoginDialog = () => {
  loginDialogVisible.value = true;
  formData.value = { username: '', password: '' };
  if (formRef.value) {
    formRef.value.resetFields().catch(err => {
      console.warn('表单重置警告:', err);
    });
  }
};

// 退出登录
const handleLogout = () => {
  try {
    localStorage.removeItem('adminInfo');
    localStorage.removeItem('adminId');
    localStorage.removeItem('adminToken'); // 新增：移除管理员token
    isLoggedIn.value = false;
    userInfo.value = {};
    ElMessage.success('已退出登录');
  } catch (err) {
    console.error('退出登录错误:', err);
    isLoggedIn.value = false;
    userInfo.value = {};
    ElMessage.success('已退出登录');
  }
};

// 提交登录表单
const submitLoginForm = async () => {
  // 表单验证
  let valid = false;
  try {
    if (!formRef.value) {
      ElMessage.error('表单初始化失败，请刷新页面');
      return;
    }
    valid = await formRef.value.validate();
  } catch (err) {
    console.warn('表单验证失败:', err);
    ElMessage.warning('请输入用户名和密码');
    return;
  }
  if (!valid) return;

  // 显示加载状态
  const loading = ElLoading.service({ 
    text: '登录中...',
    lock: true  
  });

  try {
    // 调用后端登录接口（后端已适配实体类接收参数，此处无需修改）
    const res = await api.post('/admin/login', formData.value);

    // 处理后端响应
    if (res.data && res.data.code === 200) {
      // 后端已清除password，此处简化处理
      const adminInfo = { ...res.data.adminInfo };
      userInfo.value = adminInfo;
      isLoggedIn.value = true;
      
      // 保存到本地存储
      localStorage.setItem('adminInfo', JSON.stringify(adminInfo));
      localStorage.setItem('adminId', adminInfo.id || '');
      localStorage.setItem('adminToken', `admin_${adminInfo.id}`); // 新增：保存管理员token
      
      ElMessage.success(res.data.msg || '登录成功');
      loginDialogVisible.value = false;
    } else {
      // 新增：区分后端返回的具体错误（如用户名空、密码空）
      ElMessage.error(res.data?.msg || '登录失败，请重试');
    }
  } catch (err) {
    // 网络错误处理
    console.error('登录接口调用失败:', err);
    if (err.response) {
      if (err.response.status === 404) {
        ElMessage.error('登录接口不存在，请检查后端部署');
      } else if (err.response.status === 500) {
        ElMessage.error('服务器内部错误，请联系管理员');
      } else if (err.response.status === 400) {
        // 新增：适配后端400状态码（参数为空时返回）
        ElMessage.error(err.response.data?.msg || '用户名或密码不能为空');
      } else {
        ElMessage.error(`登录失败：服务器错误(${err.response.status})`);
      }
    } else if (err.request) {
      ElMessage.error('无法连接到服务器，请检查后端是否启动');
    } else {
      ElMessage.error('登录失败：' + err.message);
    }
  } finally {
    loading.close();
  }
};

// 页面加载时检查登录状态
onMounted(() => {
  try {
    const storedAdmin = localStorage.getItem('adminInfo');
    if (storedAdmin) {
      const adminInfo = JSON.parse(storedAdmin);
      userInfo.value = adminInfo;
      isLoggedIn.value = true;
    }
  } catch (err) {
    console.error('解析管理员信息失败:', err);
    localStorage.removeItem('adminInfo');
    localStorage.removeItem('adminId');
    localStorage.removeItem('adminToken'); // 新增：移除管理员token
    isLoggedIn.value = false;
    userInfo.value = {};
  }
});
</script>

<style scoped>
/* 样式保持不变 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0 20px;
}
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #165DFF;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333;
  padding: 0 5px;
}
.sign-form {
  margin-top: 10px;
}
:deep(.el-dialog__body) {
  padding: 20px 20px 10px;
}
:deep(.el-form-item) {
  margin-bottom: 15px;
}
</style>